<template>
  <view>
    <view style="height: 48rpx"></view>
    <!-- 最外层 -->
    <scroll-view scroll-y="true">
      <view class="topContains px-3">
        <view class="d-flex align-center justify-space-between">
          <u-icon name="close" size="22" @click="$emit('close')"></u-icon>
          <view class="d-flex align-center">
            <u-icon name="setting" size="18"></u-icon>
            <text class="font-15 ml-2">设置</text>
          </view>
        </view>
        <view class="d-flex align-center my-4 twoCenter">
          <u--image
            :src="userInfo.avatar"
            shape="circle"
            width="50px"
            height="50px"
          ></u--image>
          <view class="ml-3">
            <view class="font-16 font-bold">
              {{ userInfo.masterName || "--" }} >
            </view>
            <view class="mt-2 font-10 text-center falterImg colorb2">
              暂无等级
            </view>
          </view>
        </view>
        <!-- 我的钱包 -->
        <view class="purse-money-counter">
          <view class="top-money-main">
            <view class="top-money-item">
              <view class="items-title" @click="handleMyBalance">
                我的钱包
                <u-icon name="arrow-right" color="#333" size="12"></u-icon>
              </view>
              <view class="money-bottom-explain">
                <view class="money-balance">
                  0.00
                  <text>元</text>
                </view>
                <text class="explain">钱包余额</text>
              </view>
            </view>
            <view class="top-money-item">
              <view class="items-title">
                添翼计划
                <u-icon name="arrow-right" color="#333" size="12"></u-icon>
              </view>
              <view class="money-bottom-explain">
                <view class="money-balance">
                  0.00
                  <text>元</text>
                </view>
                <text class="explain">累计收入</text>
              </view>
            </view>
            <view class="top-money-item">
              <view class="items-title">
                经营数据
                <u-icon name="arrow-right" color="#333" size="12"></u-icon>
              </view>
              <view class="money-bottom-explain">
                <view class="money-balance">
                  0.00
                  <text>元</text>
                </view>
                <text class="explain">昨日收款</text>
              </view>
            </view>
          </view>
          <!--  -->
          <view class="bottom-info">
            <view class="items-main">
              <u-icon name="info-circle" color="#60a3cf" size="13"></u-icon>
              <text>售后管理</text>
            </view>
            <view class="items-main">
              <u-icon name="file-text" color="#cf7c6b" size="13"></u-icon>
              <text>评价记录</text>
            </view>
          </view>
        </view>
        <!-- banner -->
        <u-swiper
          :list="bannerList"
          indicator
          indicatorMode="line"
          circular
          style="margin-top: 48rpx"
        ></u-swiper>
        <!-- 服务于技能 -->
        <view class="service-skill-main">
          <view class="main-title">服务与技能</view>
          <view class="counter-mark-box">
            <view class="left-mark-main">
              <i class="iconfont icon-pointed_star"></i>
              <text>服务质量分：</text>
              <text class="mark">100分</text>
            </view>
            <u-icon name="arrow-right" color="#000" size="14"></u-icon>
          </view>
          <!--  -->
          <view class="skill-sort-counter">
            <view class="skill-sort-items" @click="handleSkill(1)">
              <i class="iconfont icon-tool_box"></i>
              <text>技能中心</text>
            </view>
            <view class="skill-sort-items">
              <i class="iconfont icon-tool_box"></i>
              <text>师傅店铺</text>
            </view>
            <view class="skill-sort-items" @click="handleSkill(3)">
              <i class="iconfont icon-tool_box"></i>
              <text>服务资料</text>
            </view>
            <view class="skill-sort-items">
              <i class="iconfont icon-tool_box"></i>
              <text>积分商城</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      bannerList: [
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
      ],
    };
  },
  computed: {},
  onLoad() {},
  methods: {
    // 我的钱包
    handleMyBalance() {
      uni.navigateTo({
        url: "/pages/drawerPage/purse/purse",
      });
    },
    // 技能中心
    handleSkill(type) {
		 if(type==1){
			 uni.navigateTo({
			   url: "/pages/drawerPage/skill/index",
			 });
		 }
		 if(type==3){
			 uni.navigateTo({
				url: "/pages/home/offer/serviceInformation",
			 });
		 }
    },
  },
};
</script>

<style lang="scss" scoped>
.topContains {
  height: 100vh;
  box-sizing: border-box;
  .twoCenter {
    .falterImg {
      border-radius: 18rpx;
      border: 1px solid #b2b2b2;
    }
  }
  .purse-money-counter {
    padding: 24rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 8rpx;
    box-shadow: 4rpx 4rpx 14rpx rgba(0, 0, 0, 0.1);
    .top-money-main {
      padding: 16rpx 0 24rpx 0;
      border-bottom: 2rpx solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .top-money-item {
        display: flex;
        flex-direction: column;
        gap: 4rpx;
        align-items: flex-start;
        .items-title {
          display: flex;
          align-items: center;
          gap: 6rpx;
          font-size: 28rpx;
          color: #232323;
        }
        .money-bottom-explain {
          display: flex;
          flex-direction: column;
          .money-balance {
            font-size: 46rpx;
            color: #000;
            font-weight: 500;
            text {
              font-size: 24rpx;
              font-weight: normal;
              margin-left: 4rpx;
            }
          }
          .explain {
            font-size: 24rpx;
            color: #c2c2c2;
          }
        }
      }
    }
    .bottom-info {
      padding-top: 24rpx;
      display: flex;
      align-items: center;
      gap: 200rpx;
      .items-main {
        display: flex;
        align-items: center;
        gap: 8rpx;
        text {
          font-size: 24rpx;
          color: #333;
        }
      }
    }
  }
  .service-skill-main {
    margin-top: 40rpx;
    .main-title {
      font-size: 28rpx;
      color: #000;
    }
    .counter-mark-box {
      padding: 24rpx;
      background: #f6f7f9;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 24rpx;
      .left-mark-main {
        display: flex;
        align-items: center;
        gap: 8rpx;
        .icon-pointed_star {
          color: #000;
          font-size: 28rpx;
        }
        text {
          font-size: 28rpx;
          color: #333;
        }
        .mark {
          color: #86c75c;
        }
      }
    }
    .skill-sort-counter {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 32rpx;
      border-bottom: 2rpx solid #eee;
      .skill-sort-items {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8rpx;
        .icon-tool_box {
          font-size: 52rpx;
          color: #333;
        }
        text {
          font-size: 26rpx;
          color: #333;
        }
      }
    }
  }
}
</style>
